import { createBrowserRouter } from "react-router-dom"
import Layout from "@/layouts/Layout"
import OverviewMap from "@/pages/OverviewPage/Overview"
import Login from "@/pages/LoginPage/Login"
import { lazy, Suspense } from "react"
import { Spin } from "antd"
import ProtectedRoute from "./ProtectedRoute"


// 页面懒加载
const StoreDetail = lazy(() => import("@/pages/StorePage/StoreDetail"));
const CompareAnalysis = lazy(() => import("@/pages/ComparePage/CompareAnalysis"));
const InfoManagement = lazy(() => import("@/pages/InformationPage/InfoManagement"));
const AccessDenied = lazy(() => import("@/pages/ErrorPage/AccessDenied"));
const NotFound = lazy(() => import("@/pages/ErrorPage/NotFound"));


export default createBrowserRouter([
  {
    path: '/',
    element: (
      // 路由守卫
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    ),
    children: [
      {
        index: true,
        element: <OverviewMap />
      },
      {
        path: 'store',
        element: (
          <Suspense fallback={<Spin size="large" />}>
            <StoreDetail />
          </Suspense>
        )
      },
      {
        path: 'compare',
        element: (
          <Suspense fallback={<Spin size="large" />}>
            <CompareAnalysis />
          </Suspense>
        )
      },
      {
        path: 'management',
        element: (
          <Suspense fallback={<Spin size="large" />}>
            <ProtectedRoute role="admin">
              <InfoManagement />
            </ProtectedRoute>
          </Suspense>
        )
      }
    ]
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<Spin size="large" />}>
        <Login />
      </Suspense>
    )
  },
  {
    path: '/403',
    element: (
      <Suspense fallback={<Spin size="large" />}>
        <AccessDenied />
      </Suspense>
    )
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Spin size="large" />}>
        <NotFound />
      </Suspense>
    )
  }
]);